// The trailing cursor's easing has bene pulled from this demo
// - https://codepen.io/jakedeakin/full/MWKQVxX

function trailingCursor(options) {
  let hasWrapperEl = options && options.element
  let element = hasWrapperEl || document.body

  let width = window.innerWidth
  let height = window.innerHeight
  let cursor = { x: width / 2, y: width / 2 }
  let particles = []
  let canvas, context

  const totalParticles = options.particles || 15
  let cursorsInitted = false

  let baseImage = new Image()
  baseImage.src =
    ''

  function init() {
    canvas = document.createElement('canvas')
    context = canvas.getContext('2d')
    canvas.style.top = '0px'
    canvas.style.left = '0px'
    canvas.style.pointerEvents = 'none'

    if (hasWrapperEl) {
      canvas.style.position = 'absolute'
      element.appendChild(canvas)
      canvas.width = element.clientWidth
      canvas.height = element.clientHeight
    } else {
      canvas.style.position = 'fixed'
      document.body.appendChild(canvas)
      canvas.width = width
      canvas.height = height
    }

    bindEvents()
    loop()
  }

  // Bind events that are needed
  function bindEvents() {
    element.addEventListener('mousemove', onMouseMove)
    window.addEventListener('resize', onWindowResize)
  }

  function onWindowResize(e) {
    width = window.innerWidth
    height = window.innerHeight

    if (hasWrapperEl) {
      canvas.width = element.clientWidth
      canvas.height = element.clientHeight
    } else {
      canvas.width = width
      canvas.height = height
    }
  }

  function onMouseMove(e) {
    if (hasWrapperEl) {
      const boundingRect = element.getBoundingClientRect()
      cursor.x = e.clientX - boundingRect.left
      cursor.y = e.clientY - boundingRect.top
    } else {
      cursor.x = e.clientX
      cursor.y = e.clientY
    }

    if (cursorsInitted === false) {
      cursorsInitted = true
      for (let i = 0; i < totalParticles; i++) {
        addParticle(cursor.x, cursor.y, baseImage)
      }
    }
  }

  function addParticle(x, y, image) {
    particles.push(new Particle(x, y, image))
  }

  function updateParticles() {
    context.clearRect(0, 0, width, height)

    let x = cursor.x
    let y = cursor.y

    particles.forEach(function (particle, index, particles) {
      let nextParticle = particles[index + 1] || particles[0]

      particle.position.x = x
      particle.position.y = y
      particle.move(context)
      x += (nextParticle.position.x - particle.position.x) * 0.4
      y += (nextParticle.position.y - particle.position.y) * 0.4
    })
  }

  function loop() {
    updateParticles()
    requestAnimationFrame(loop)
  }

  /**
   * Particles
   */

  function Particle(x, y, image) {
    this.position = { x: x, y: y }
    this.image = image

    this.move = function (context) {
      context.drawImage(
        this.image,
        this.position.x, // - (this.canv.width / 2) * scale,
        this.position.y //- this.canv.height / 2,
      )
    }
  }

  init()
}
new trailingCursor()